<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/mobile-common.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="sass/m-style.css">
    <link rel="stylesheet" href="sass/style.css">
    <link rel="stylesheet" href="../../css/animate.css">
    <title>Document</title>
</head>
<body>
    <div class="header">
        <div class="header-c">
            <div class="logo">
                <a href="javascript:;"></a>
            </div>
           <div class="nav">
               <a href="javascript:;" class="nav-item animated active" style="animation-delay: 0s;">首页</a>
               <a href="javascript:;" class="nav-item animated" style="animation-delay: 0.1s;">项目案例</a>
               <a href="javascript:;" class="nav-item animated" style="animation-delay: 0.2s;">加入我们</a>
               <a href="javascript:;" class="nav-item animated" style="animation-delay: 0.3s;">联系我们</a>
           </div>
           <a href="javascript:;" class="m-nav-icon close">
               <span></span>
               <span></span>
               <span></span>  
           </a>
        </div>
    </div>
    <div class="container">
        <div class="container-c">
            <div class="case-main">
                <div class="case-title">
                    <h2>造物电商网站</h2>
                    <div class="case-info">
                        <p>时间：2018-11-20</p>
                        <p>类型：电子商务</p>
                        <p>项目人员配置：PM + UI设计 + 前端开发 + 后台开发</p>
                        <p>项目周期：20天</p>
                    </div>
                </div>
                <div class="case-tips">
                        万事开头难，很多同学想从事UI设计，确苦于没有实际项目经验被用人单位拒之门外。实战项目式教学，是我们不同于其他培训机构的最大特点，学员学习期间共同参与实战项目，学
                        习即等于工作，毕业即可直接就业。4个月时间把学员送进今日头条，网易，360，或许下一个是你。
                </div>
                <div class="case-detail">
                    <img src="../../img/product_1.jpg" alt="">
                </div>
                <div class="look-btn">点击浏览</div>
            </div>
            <div class="case-other">
                    <h2 class="caption">其他案例</h2>
                    <span>Others</span>
                    <div class="case-list">
                        <li class="case-item animated" style="animation-delay: 0s;">
                            <a href="javascript:;">
                                <img class="case-item-img" src="../../img/product_1.jpg" alt="" srcset="">
                            </a>
                            <h2 class="case-name">马克叔叔摄影网站</h2>
                            <p class="case-profession">摄影摄像行业</p>
                        </li>
                        <li class="case-item animated" style="animation-delay: 0.1s;">
                            <a href="javascript:;">
                                <img class="case-item-img" src="../../img/product_2.jpg" alt="" srcset="">                                    
                            </a>
                            <h2 class="case-name">淘宝电商网页设计</h2>
                            <p class="case-profession">电子商务行业</p>
                        </li> 
                        <li class="case-item animated" style="animation-delay: 0.2s;">
                            <a href="javascript:;">
                                <img class="case-item-img" src="../../img/product_3.jpg" alt="" srcset="">                                    
                            </a>
                            <h2 class="case-name">东方航空员工考勤系统</h2>
                            <p class="case-profession">后台管理系统</p>
                        </li>             
                    </div>
            </div>
        </div>
    </div>
    <div class="footer">
            <div class="contact">
                <div class="contact-c">
                    <div class="contact-us">
                        <h2 class="caption">联系我们</h2>
                        <span>Contact us</span>
                        <ul class="contact-info">
                            <li class="animated" style="animation-delay: 0s;">
                                    <h2 class="logo-f"></h2>
                                    <p class="logo-title">郑州不凡科技有限公司</p>
                            </li>
                            <li class="animated" style="animation-delay: 0.1s;">
                                <p>地址：郑东新区绿地新都会6号楼1210</p>
                                <p>电话：0371-55602883</p>
                                <p>手机：18838180363</p>
                            </li>
                            <li class="animated" style="animation-delay: 0.2s;">
                                <p>路线：地铁1号线 东风南路站C口出向北步行300米(近郑州东站)</p>
                                <p>郵编：450000</p>
                                <p>邮箱：bd@bufanui.com</p>
                            </li>
                        </ul>
                    </div>
    
                </div>
            </div>
        <div class="footer-copyright">
                <div class="footer-copyright-c">
                    <div class="copyright">
                            @2017不凡科技 郑州IT技术服务  豫ICP备17015347号
                    </div>
                </div>
        </div>   
    </div>
    <script src="../../lib/jquery-3.3.1.min.js"></script>
    <script>
        $('.m-nav-icon').click(function () {
            if ($(this).hasClass('close')) {
                $(this).addClass('open').removeClass('close');
                $('.nav').addClass('open');
                $('.nav-item').addClass('fadeInRight')
            } else {
                $(this).addClass('close').removeClass('open');
                $('.nav').removeClass('open');
                $('.nav-item').removeClass('fadeInRight')
            }
        });
        ;(window.onscroll = function(){
            var scrolltop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
            var scrollH = scrolltop + window.innerHeight;
            if(scrolltop>0){
                $('.header').addClass('mini');
            }
            if(scrolltop==0){
                $('.header').removeClass('mini');
            }
            if(scrollH>=$('.case-list').offset().top){
                $('.case-item').css('visibility','visible');                
                $('.case-item').addClass('fadeInUp');
            }
            if(scrollH>=$('.contact-info').offset().top){
                $('.contact-info').children().css('visibility','visible');
                $('.contact-info').children().addClass('fadeInUp');
            }
        })()
    </script>
</body>
</html>